<template>
  <el-card>
    <div slot="header" class="clearfix">
      <span>流程属性</span>
    </div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="常规" name="first">
        <el-form-item label="编号">
          <el-input v-model="id" disabled />
        </el-form-item>
        <el-form-item label="流程名称">
          <el-input v-model="name" disabled />
        </el-form-item>
      </el-tab-pane>
      <el-tab-pane label="权限" name="second">
        <authority :initdisplay="false" :init-object-from-parent="initObj" @changeAuthority="changeAuthority" />
      </el-tab-pane>
      <el-tab-pane label="监听" name="third">
        <el-container>
          <el-header>
            <el-button type="primary" @click="listenerVisible = true">监听器设置</el-button>
          </el-header>
          <el-main>
            <el-tag v-for="(tag,index) in table.listeners" :key="index" type="success">{{ tag.eventTypeLabel }} : {{ tag.listenerValueLabel }} : {{ tag.listenerValue }}</el-tag>
          </el-main>
        </el-container>
        <executionListener v-if="listenerVisible==true" :table="table" @saveListener="saveListener" @cancel="cancelListener" />
      </el-tab-pane>
    </el-tabs>
  </el-card>
</template>
<script>
import authority from './authority.vue'
import executionListener from './executionListener.vue'
import elementHelper from '../js/helper/ElementHelper'
import { ExecutionListenerTypes, ListenerTypes } from '../js/const/bpmnConsts.js'
export default {
  components: {
    authority,
    executionListener
  },
  // 依赖注入
  props: {
    element: {
      required: false,
      type: Object,
      default: null
    }
  },
  inject: ['bpmnModeler', 'params'],
  data() {
    return {
      userSelDialogFormVisible: false,
      id: '',
      name: '',
      process_namespace: '',
      activeName: 'first',
      candidateStarterGroups: [],
      candidateStarterUsers: [],
      listeners: [],
      listenerType: 'class',
      eventType: 'start',
      listenerValue: '',
      isShow: false,
      listenerValueLabel: 'Java类',
      initObj: {
        candidateStarterGroups: [],
        candidateStarterUsers: []
      },
      /** 当前选中的行 */
      selectedRow: null,
      listenerVisible: false,
      table: {
        listeners: [],
        selectedRow: null
      }
    }
  },
  watch: {
    id(newVal, oldVal) {
      if (this.element.type !== 'bpmn:Process') {
        alert('this is commonProps  id')
        return
      }
      const bpmnModeler = this.bpmnModeler()
      const modeling = bpmnModeler.get('modeling')
      modeling.updateProperties(this.element, { 'id': newVal })
    },
    name(newVal, oldVal) {
      if (this.element.type !== 'bpmn:Process') {
        alert('this is commonProps  name')
        return
      }
      const bpmnModeler = this.bpmnModeler()
      const modeling = bpmnModeler.get('modeling')
      modeling.updateProperties(this.element, { 'name': newVal })
    },
    candidateStarterGroups(newVal, oldVal) {
      if (this.element.type !== 'bpmn:Process') {
        alert('this is commonProps  candidateStarterGroups')
        return
      }
      const bpmnModeler = this.bpmnModeler()
      const modeling = bpmnModeler.get('modeling')
      modeling.updateProperties(this.element, { 'candidateStarterGroups': newVal })
    },
    candidateStarterUsers(newVal, oldVal) {
      if (this.element.type !== 'bpmn:Process') {
        alert('this is commonProps  candidateStarterUsers')
        return
      }
      const bpmnModeler = this.bpmnModeler()
      const modeling = bpmnModeler.get('modeling')
      modeling.updateProperties(this.element, { 'candidateStarterUsers': newVal })
    },
    // 监控element值，当发生改变时获取响应的属性
    element: {
      deep: true,
      immediate: true,
      handler(newVal, oldVal) {
        if (newVal) {
          const that = this
          if (this.element.type !== 'bpmn:Process') return
          const businessObject = newVal.businessObject
          this.id = businessObject.get('id')
          this.name = businessObject.get('name')
          const candidateGroupsTemp = businessObject.get('candidateStarterGroups')
          // 解决后端反显和切换节点反显candidateGroupsTemp类型不一致问题
          if (candidateGroupsTemp && candidateGroupsTemp.length > 0) {
            if (Array.isArray(candidateGroupsTemp)) {
              // 切换节点反显
              this.candidateStarterGroups = businessObject.get('candidateStarterGroups')
            } else {
              // 后端反显
              this.candidateStarterGroups = businessObject.get('candidateStarterGroups').split(',')
            }
            this.initObj['candidateStarterGroups'] = this.candidateStarterGroups
          }
          const candidateUsersTemp = businessObject.get('candidateStarterUsers')
          // 解决后端反显和切换节点反显candidateGroupsTemp类型不一致问题
          if (candidateUsersTemp && candidateUsersTemp.length > 0) {
            if (Array.isArray(candidateUsersTemp)) {
              // 切换节点反显
              this.candidateStarterUsers = businessObject.get('candidateStarterUsers')
            } else {
              // 后端反显
              this.candidateStarterUsers = businessObject.get('candidateStarterUsers').split(',')
            }
            this.initObj['candidateStarterUsers'] = this.candidateStarterUsers
          }
          const extensionElements = businessObject.get('extensionElements')

          // class: "789"
          // event: "start"
          if (extensionElements) {
            if (extensionElements.get('values')) {
              extensionElements.get('values').forEach(t => {
                if (t.$type === 'activiti:ExecutionListener') {
                  const obj = {
                    // eventType: t.$attrs.event,
                    eventType: t.event,
                    eventTypeLabel: '',
                    listenerType: '',
                    listenerValueLabel: '',
                    listenerValue: ''
                  }
                  // const ind = findIndex(ExecutionListenerTypes, { eventType: t.$attrs.event })
                  const ind = ExecutionListenerTypes.findIndex(item => { return item.eventType === t.event })
                  if (ind !== -1) {
                    obj.eventTypeLabel = ExecutionListenerTypes[ind].eventTypeLabel
                  }

                  // for (var item in t.$attrs) {
                  for (var item in t) {
                    const index = ListenerTypes.findIndex(item => { return item.listenerType === item })
                    if (index !== -1) {
                      obj.listenerType = item
                      obj.listenerValueLabel = ListenerTypes[index].listenerValueLabel
                      // obj.listenerValue = t.$attrs[item]
                      obj.listenerValue = t[item]
                    }
                  }
                  that.table.listeners.push(obj)
                }
              })
            }
          }
          // 初始化赋值
          // const bpmnModeler = this.bpmnModeler()
          // const modeling = bpmnModeler.get('modeling')
          // modeling.updateProperties(this.element, { 'name': this.name })
          // modeling.updateProperties(this.element, { 'process_namespace': this.process_namespace })
          // modeling.updateProperties(this.element, { 'process_id': this.id })
          // modeling.updateProperties(this.element, { 'candidateStarterGroups': this.candidateStarterGroups })
          // modeling.updateProperties(this.element, { 'candidateStarterUsers': this.candidateStarterUsers })
        }
      }
    },
    'table.listeners': {
      immediate: true,
      deep: true,
      handler(newVal, oldVal) {
        if (newVal && newVal.length > 0) {
          const bpmnModeler = this.bpmnModeler()
          const bpmnFactory = bpmnModeler.get('bpmnFactory')
          let extensionElements = this.element.businessObject.get('extensionElements')
          if (!extensionElements) {
            extensionElements = elementHelper.createElement('bpmn:ExtensionElements', null, this.element, bpmnFactory)
          }
          const length = extensionElements.get('values').length
          for (let i = 0; i < length; i++) {
            // 清除旧值
            extensionElements.get('values').pop()
          }
          newVal.forEach(evt => {
            const executionListener = elementHelper.createElement('activiti:ExecutionListener', null, this.element, bpmnFactory)
            // executionListener.$attrs['event'] = evt.eventType
            // executionListener.$attrs[evt.listenerType] = evt.listenerValue
            executionListener['event'] = evt.eventType
            executionListener[evt.listenerType] = evt.listenerValue
            extensionElements.get('values').push(executionListener)
          })
          const modeling = bpmnModeler.get('modeling')
          modeling.updateProperties(this.element, {
            extensionElements: extensionElements
          })
        }
      }
    }
  },
  created() {

  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event)
    },
    changeAuthority(data) {
      this.candidateStarterUsers = data.users
      this.candidateStarterGroups = data.groups
      this.initObj = {
        candidateStarterGroups: data.groups,
        candidateStarterUsers: data.users
      }
    },
    saveListener(data) {
      this.table.listeners = data
      this.listenerVisible = false
    },
    cancelListener() {
      this.listenerVisible = false
    }
  }
}
</script>
